<template>
    <div class="txDetail">
        <div class="content">
            <div class="header">
                <img class="header-img" src="@/assets/order-success.png" mode="widthFix" style="width: 30%" />
                <div>{{ detail.statusDesc }}</div>
                <div class="money">￥ {{ detail.dpayAmount }}</div>
            </div>
            <div class="footer">
                <div class="i">
                    <div class="left">提现到</div>
                    <div class="right">{{ bankName }} ({{ detail.bankAccountNo }})</div>
                </div>
                <div class="i">
                    <div class="left">交易流水号</div>
                    <div class="right">
                        {{ detail.transOrder }}
                    </div>
                </div>
                <div class="i">
                    <div class="left">提现时间</div>
                    <div class="right">
                        {{ detail.withdrawTime }}
                    </div>
                </div>
                <div class="btn" @click="goIndex">回到首页</div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { withdrawDetail } from '@/api/wallet'

export default defineComponent({
    name: 'results',
    setup() {
        const route = useRoute()
        const router = useRouter()
        const state = reactive({
            transOrder: route.query.transOrder,
            bankName: route.query.bankName,
            detail: {}
        })
        const getWithdrawDetail = () => {
            withdrawDetail({
                transOrder: state.transOrder
            }).then(res => {
                state.detail = res.object
            })
        }
        getWithdrawDetail()
        const goIndex = () => {
            uni.switchTab({
                url: '/pages/agent/index'
            })
        }
        return {
            ...toRefs(state),
            goIndex
        }
    }
})
</script>

<style scoped lang="scss">
.txDetail {
    padding: 10px;
    .content {
        text-align: center;
        background-color: #ffffff;
        border-radius: 10px;
        .header {
            padding: 75px 0;
            line-height: 30px;
            .header-img {
                width: 60%;
            }
            .money {
                font-size: 20px;
                font-weight: bold;
            }
        }
        .footer {
            padding: 0 15px 15px 15px;
            line-height: 30px;
            .i {
                display: flex;
                justify-content: space-between;
                .left,
                .right {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #545454;
                    opacity: 1;
                }
            }
        }
    }
    .btn {
        width: 240px;
        height: 40px;
        background: #66d6ff;
        opacity: 1;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px auto;
        color: #ffffff;
    }
}
</style>
